<template>
    <div class="app-container">
        <div class="charts"  >
            <div  ref="materialsChart" class="materialsChart"></div>
            <div  ref="schoolChart" class="schoolChart"></div>
      </div>
    </div>
</template>
<script>

import moment from "moment";
import {getMaterialavg,getschoolavg } from "@/api/qu/qycktf";
export default {
  name: "cltftj",
  data() {
    return {
        queryParams:{
            type:'1',
            nature:'',
            semId:''
        },
        materialsChart:null,
        materialsList:[
            {name:'大型器械',value:200},
            {name:'中小型器械',value:200},
            {name:'手持器械',value:200},
        ],
        schoolChart:null,
        material0:[],
        material1:[],
        material2:[],
        materialTypeOptions:[],
    };
  },
  created() {
    this.getDicts("material_type").then(response => {
          this.materialTypeOptions = response.data;
       });
  },
  mounted(){
        this.materialsChart = this.$echarts.init(this.$refs.materialsChart);
        this.schoolChart = this.$echarts.init(this.$refs.schoolChart);
        this.getList();
        this.getschoolavg();
   },
  methods: {
    async getList(){
      try {
        const data =  await getMaterialavg({})
        this.materialsList=data.rows.map(item=>{
          return {
                 name:this.materialTypeFormat(item),
                 value:item.materialCount,
                 avg:item.materialAvg,
               }
        });
        this.materialsChartFn();
      } catch (error) {
        console.log(error);
      }
    },
    async getschoolavg(){
      try {
        const  data = await getschoolavg({})
        this.material0=data.rows.map(item=>{
           return {
            name:item.schoolName,
            value:item.material0,
            age:item.materialAvg0,
           }
        });
        this.material1=data.rows.map(item=>{
           return {
            name:item.schoolName,
            value:item.material1,
            age:item.materialAvg1,
           }
        });
        this.material2=data.rows.map(item=>{
           return {
            name:item.schoolName,
            value:item.material2,
            age:item.materialAvg2,
           }
        });
        this.schoolChartFn();
      } catch (error) {
        console.log(error);
      }
    },
    // 材料类型字典翻译
    materialTypeFormat(row, column) {
      return this.selectDictLabel(this.materialTypeOptions, row.materialType);
    },
    schoolChartFn(){
          const option = {
         // backgroud:'#333',
         title: {
           text: '各园材料投放情况',
          //  subtext: '纯属虚构',
           left: 'left'
         },
         dataZoom:{
            bottom:0,
            show:8/this.material0.length<1,
            // show:true,
            type:'slider',
            zoomLock:true,
            brushSelect:false,
            height:8,
            // backgroundColor:'#000000',
            handleSize:'0',
            // moveHandleSize:1,
            // moveHandleStyle:{
            //   borderType:'dotted'
            // },
            sow:true,
            xAxisIndex:[0],
            start:0,
            end:8/this.material0.length*100
        },
         tooltip: {
              trigger: 'item',
              formatter: function (params) {
               return params.seriesName+'数量：'+params.value+' , 人均占有量：'+params.data.age;
             },
          },
          legend: {
            selectedMode: 'single',
            top:0,
              left:'right',
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               rotate:0,
               interval: 0,//使x轴文字显示全
              },
              data: this.material0.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value'
              }
          ],
          color:['#5ab1ef','#2ec7c9',],
          series: [
              {
                  name: '大型器械',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.material0
              },
              {
                  name: '中小型器械',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.material1
              },
              {
                  name: '手持器械',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.material2
              },
             
          ]
          }
            // 使用刚指定的配置项和数据显示图表
            this.schoolChart.setOption(option,true);
            window.addEventListener("resize", this.monitorResize);
      },
    //全区不同材料的数量统计
    materialsChartFn(){
      const  option = {
           title: {
             text: '全区不同材料的数量统计',
            //  subtext: '纯属虚构',
             left: 'left'
           },
           tooltip: {
             trigger: 'item',
             formatter: function (params) {
               return params.name+': '+params.value+' , 人均占有量：'+params.data.avg;
             },
           },
           legend: {
             type: 'scroll',
             orient: 'vertical',
             right: '20%',
             top: 20,
             bottom: 20,
            
           },
           grid: {
            top:5,
           left: '3%',
           right: '4%',
           bottom: '3%',
           containLabel: true
         },
           series: [
             {
               name: '',
               type: 'pie',
               radius: '60%',
               center: ['40%', '50%'],
               data:this.materialsList,
               emphasis: {
                 itemStyle: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
               }
             }
             ]
          };
          this.materialsChart.setOption(option);
          window.addEventListener("resize", this.monitorResize);
    },
     //地图监听窗口缩放事件
     monitorResize(){
        this.materialsChart.resize();
        this.schoolChart.resize();
      },
  
  }
};
</script>

<style lang="scss" scoped>
.charts{
    display: flex;
    justify-content: space-between;
    width:100%;
        .materialsChart{
            margin-top: 10px;
            width: 40%;
            height: 500px;
    
         }
         .schoolChart{
            margin-top:10px;
            width: 55%;
            height: 500px;
    
         }
}
</style>